<template>
    <div v-if="detail">
        <h1>交易订单详细信息</h1>
        <LabelTitle title="当前订单进度"></LabelTitle>
        <div class="a">
            <el-timeline>
                <el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon"
                    :type="activity.type" :hollow="activity.hollow">
                    {{ activity.content }}
                </el-timeline-item>
            </el-timeline>
            <div>
                <span v-if="query.a == 1 && detail.state<2">
                    <span>
                        你待缴的保证金金额 = 采购数量 * 原煤单价 = {{detail.buy.count}} * {{detail.sell.price}} = {{ detail.buy.count *
                        detail.sell.price}} 元
                    </span>
                    <el-button @click="dialogVisible = true" style="width:150px;margin-left:2rem" type="primary" plain>
                        支付保证金</el-button>
                </span>

                <span v-else-if="detail.state<2">
                    当前订单进度：等待对方缴纳保证金
                </span>
            </div>
            <el-dialog v-model="dialogVisible" :title="title" width="350px">
                <div style="display:flex;justify-content: space-between;">
                    <div class="b">
                        <span>微信</span>
                        <img src="@/assets/generate.png" alt="">
                    </div>

                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="handleClick">模拟支付</el-button>
                        <el-button @click="dialogVisible = false">取消</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
        <BuyData :item="detail.buy" />
        <SellData :item="detail.sell" />

    </div>
    <div v-else>
        <el-skeleton :rows="80" animated />
    </div>
</template>

<script lang="ts" setup>
import { useDetailStore } from "../../../../../store/user";
import BuyData from "../component/BuyerData.vue";
import SellData from "../component/SellerData.vue";
import { MoreFilled } from '@element-plus/icons-vue'
import { transactionSelect } from "../../../../../select/user";
import { useRoute } from "vue-router";
import { ref, watch } from "vue";
import LabelTitle from "@/components/LabelTitle/index.vue"
import { depositApi, detailApi } from "../../../../../api/user";
import { ElMessage } from "element-plus";
const dialogVisible = ref(false)
const arr = ["请扫二维码进行支付（微信/支付宝）", "已经扫码，请在手机上进行支付"]
const title = ref(arr[0]);
const { query, params: { id } } = useRoute();
let timer;
watch(dialogVisible, () => {
    clearTimeout(timer);
    setTimeout(() => {
        title.value = arr[1];
    }, 2000)
})
const handleClick = () => {

    depositApi({
        id
    }).then(({ code, msg }) => {
        if (code === 200) {
            ElMessage({
                message: "支付成功",
                type: "success",
                onClose() {
                    location.reload();
                }
            })
        } else {
            ElMessage({
                message: msg,
                type: "warning"
            })
        }
    })
}

let detail = ref(null);
let activities = ref([]);

detailApi({}, {
    id
}).then(({ data }) => {
    detail.value = data;
    const { state } = data;
    activities.value = [
        {
            content: '摘牌完成',
            size: 'large',
            type: 'primary',
            icon: MoreFilled,
        },
        {
            content: '已经交完保证金',
            type: state >= 2 ? 'primary' : "info",
            hollow: true,
        },
        {
            content: '交易审核完成',
            type: state >= 3 ? 'primary' : "info",
            hollow: true,
        },
        {
            content: '物流',
            type: state >= 4 ? 'primary' : "info",
            hollow: true,
        },
        {
            content: '完成订单',
            type: state >= 5 ? 'primary' : "info",
            hollow: true
        },
    ]
})



</script>

<style scoped lang="less">
.a {
    display: flex;

    .el-timeline {
        width: 300px;
    }

    div {
        flex: 1
    }
}

.b {
    width: auto;
    margin: 0 auto;

    img {
        display: block;
        margin: 0 auto
    }

    span {
        display: block;
        text-align: center;
        color: #333;
        font-size: 21px;
        margin-bottom: 1rem;
    }
}
</style>